<template>
  <div>父组件</div>
  <div>{{ message }}</div>
  <!-- 在页面中使用子组件 -->
  <mySonCom :msg="msg" :count="count"></mySonCom>
  <!-- 组件2 -->
  <myComm @getMsg="getMsg" ref="myCommRef"></myComm>
  <h1 ref="h1Ref">我是h1标签</h1>
</template>
<script setup>
// 引入生命周期
import { ref, onMounted } from "vue";
// 引入子组件
import mySonCom from "./components/mySonCom";
import myComm from "./components/myComm.vue";
const message = ref("你好 onMounted");
const msg = ref("你好 父组件传入的数据");
const count = ref(100);
const getMsg = (msg) => {
  console.log(msg);
};
setTimeout(() => {
  // 2秒之后修改count的值为666
  count.value = 666;
}, 2000);

// 调用ref函数 => ref对象
const h1Ref = ref(null);
const myCommRef = ref(null);
// 获取dom对象
// 获取组件的实例对象
// 执行函数
onMounted(() => {
  console.log("生命周期onMounted执行了");
  // 打印dom 和组件实例对象
  console.log(h1Ref.value);
  console.log(myCommRef.value);
});
</script>
<style lang="" scoped></style>
